<template>
  <carousel class="index-carousel no-bottom-mobile"
            :autoplay="true"
            :minSwipeDistance="40"
            :scrollPerPage="true"
            :speed="1000"
            :perPage="1"
            paginationActiveColor="#0eb4b6"
            :paginationSize="10"
            :paginationPadding="10"
            paginationPosition="bottom-overlay"
            :navigationEnabled=true
            navigationPrevLabel="<i class='iconfont left icon-zuo'></i>"
            navigationNextLabel="<i class='iconfont right icon-you'></i>"
            :loop="true">
      <slide class="good" v-for="(item, index) in list[0].sunList" :key="index">
          <div class="img-sroll-mobile" :style="{ background: 'url(' + item.titleImg + ')' }" ></div>
      </slide>
  </carousel>
</template>

<script>
  import {Carousel,Slide} from 'vue-carousel'
  import _http from "../httpService";
  export default {
    name: "Banner",
    props: {},
    data() {
      return {
        list: [
          {imgUrl: require('../assets/images/banner.jpg')},
          {imgUrl: require('../assets/images/banner.jpg')},
          {imgUrl: require('../assets/images/banner.jpg')},
        ],
      }
    },
    components:{
      Carousel,
      Slide
    },
    mounted() {

    },
    methods: {

    },
    created() {
      // 初始化加载栏目等数据
      _http
          .get("/website/jcChannel/getChannelListByPc?parentCode=banner")
          .then((response) => {
              console.log(response);
              this.list = [];
              response.data.result.records.forEach((element) => {
                  this.list.push({
                      name: element.channelName,
                      path: element.link,
                      sunList: element.contentList,
                  });
              });
          })
          .catch((error) => console.log(error))
          .finally(() => (this.loading = false));
      },
  };
</script>

<style lang="scss">
  .img-sroll-mobile{
    display:block;
    height:6rem;
    background-size:100% 100% !important;
    background-position: center center !important;
  }
  .no-bottom-mobile{
    .VueCarousel-pagination--bottom-overlay{
      bottom:.1rem;
    }
    .VueCarousel-navigation-button{
      transform:none !important;
      margin:-.5rem 0rem 0rem 0rem;
      .iconfont{
        font-size:30px;
        color:#fff;
      }
    }
    .VueCarousel-navigation-button:focus,.VueCarousel-dot:focus{
      outline:0px;
    }
  }
</style>
